<template>
	<view>
		<view class="my-page-content ">
			<view class="my-m-title">
				损坏描述
				<view class="mb40 grey-tips">请选择投诉的原因，可多选</view>
			</view>
			<view>

				<van-checkbox-group :value="formData.description" @change="onChange">
					<van-checkbox v-for="(item, index) in reasonList" :key="index" custom-class="my-radio-group"
						checked-color="#FCE353" :name="item.text" shape="square">
						{{item.text}}
					</van-checkbox>
				</van-checkbox-group>
			</view>
			<view class="my-m-title">具体说明</view>

			<van-field custom-class="my-textare-class" :value="formData.detail" maxlength="200" show-word-limit="true" label=" "
				:title-width="0" type="textarea" placeholder="选填，请输入" autosize :border="false" @change="changeValue($event,'detail')" />

			<view class="mb20 grey-tips">上传凭证最多10张</view>
			<ljs-dragImages v-model="imgList" :colCount="3" :count="10" @uploadFile="upload">
			</ljs-dragImages>

			<view class="my-m-title">赔偿金额</view>
			<van-field custom-class="my-textare-class" :value="formData.penalty" placeholder="请输入"
				@change="changeValue($event,'penalty')">
				<span slot="button"> 加元</span>
			</van-field>
			<view class="mb20 grey-tips">
				押金{{$formatNumber(orderData.deposit) }}加元 （钥匙{{$formatNumber(orderData.deposit_key)}} +
				房损{{$formatNumber(orderData.deposit_damage)}}）
			</view>


		</view>




		<van-dialog confirm-button-class="color-orange" id="van-dialog" />
		<footBtn btnText="确定提交" @nextStep="nextStep"></footBtn>
	</view>

</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	import refundTips from './components/refundTips.vue';
	export default {
		components: {
			footBtn,
			refundTips
		},
		data() {
			return {
				userInfo: this.$getStorage('userInfo'),
				radio: '',
				reason: '',
				reasonList: [{
						id: 0,
						text: '钥匙损坏或遗失'
					},
					{
						id: 1,
						text: '房屋设备损坏'
					}
				],
				formData: {
					order_number: '', // 是	string	订单编号
					description: [],
					penalty: '',
					detail: '',
					pics: [],
				},
				orderData: this.$getStorage('orderData'),

				imgList: []
			}
		},
		mounted() {
			this.formData.order_number = this.orderData.order_number;
			this.init();
		},
		methods: {
			init() {

			},

			onChange(e) {
				this.formData.description = e.detail;
			},
			changeValue(e, name) {
				this.formData[name] = e.detail;
			},
			showDialog() {
				Dialog.confirm({
						title: '提示',
						confirmButtonText: '确定提交',
						cancelButtonText: '再想想',
						message: '请确认信息是否填写准确，提交后不可撤销，不可修改，是否确定提交?',
					})
					.then(() => {
						this.$http.addCompaint(this.formData).then(res => {
							this.$toast('操作成功');
							uni.$emit('refreshOrderData');
							this.$goPage(3, '/subOrder/orderDetail?orderNumber=' + this.orderData.order_number);
						});
					})

			},
			nextStep() {
				console.log(this.formData);
				if (this.formData.description.length == 0) {
					this.$toast('请选择')
					return;
				}
				if (!this.formData.penalty) {
					this.$toast('请输入赔偿金额')
					return;
				}
				this.formData.pics = this.imgList.map(item=> item.imgSrc);

				this.showDialog();
			},
			upload(event) {
				let num = 0;
				let totalNum = 0;
				uni.showLoading({
					title: '上传中',
					mask: true // 显示透明遮罩
				});
				this.imgList.forEach((i, index, arr) => {
					if (!i.imgSrc) {
						totalNum += 1;
						const fileUrl = i.url;
						const data = [{
								name: 'file',
								url: fileUrl
							},
							{
								type: 'tax-bill'
							}
						];
						this.$uploadFile(...data).then(res => {
							num += 1;
							if (num == totalNum) {
								uni.hideLoading();
								this.$forceUpdate();
							}
							this.imgList[index].imgSrc = res.filepath;
						})
					}

				})

			}
		}
	}
</script>

<style>
	.my-radio-group {
		margin-bottom: 40rpx;
	}
</style>